<template>
  <sn-row-has-two-col :left="16" :right="8">
    <el-image :src="bigPicture" slot="one-col" class="big-picture"/>
    <div slot="two-col">
      <sn-row-has-two-col :left="12" :right="12">
        <el-image :src="littlePictures[0]" slot="one-col" class="little-picture"/>
        <el-image :src="littlePictures[1]" slot="two-col" class="little-picture"/>
      </sn-row-has-two-col>
      <sn-row-has-two-col :left="12" :right="12" class="distance-picture-row">
        <el-image :src="littlePictures[2]" slot="one-col" class="little-picture"/>
        <el-image :src="littlePictures[3]" slot="two-col" class="little-picture"/>
      </sn-row-has-two-col>
    </div>
  </sn-row-has-two-col>
</template>

<script>
export default {
  name: "IntroducePictures",
  props: {
    bigPicture: {
      type: String,
      default: 'https://p1.meituan.net/movie/a9c252b6325404b65af601aff621dabc327500.jpg@465w_258h_1e_1c'
    },
    littlePictures: {
      type: Array,
      default() {
        return [
          'https://p0.meituan.net/movie/ec0cf23a120596de703bd77b897eaee6202768.jpg@126w_126h_1e_1c',
          'https://p1.meituan.net/movie/cf7aac05b65fbc8398693dd5a826126b224614.jpg@126w_126h_1e_1c',
          'https://p0.meituan.net/movie/2f89fdd4bf73f5aa5737f140b4bb2c6a186241.jpg@126w_126h_1e_1c',
          'https://p1.meituan.net/movie/6d7054909fa66eb4f9bd3f9a740aa444204683.jpg@126w_126h_1e_1c'
        ]
      }
    }
  },
}
</script>

<style scoped lang="less">
.big-picture {
  width: 529px;
  height: 262.6px;
}

.little-picture {
  width: 127px;
  height: 127px;
}

.distance-picture-row {
  margin-top: 5px;
}
</style>